<template>
    <view>
        <view class="headBg">
            <view class="title">
                <swiper :indicator-dots="true" :autoplay="true" interval="3000" duration="1000" :circular="true" class="swip">
                    <block v-for="(item, index) in movies" :key="index">
                        <swiper-item>
                            <image :src="item" mode="widthFix"></image>
                        </swiper-item>
                    </block>
                </swiper>
            </view>
        </view>
        <view style="position: relative; top: -40rpx; height: 80rpx">
            <view class="pa-l60 pa-r60 pa-b20">
                <view class="pa-30 bg-m panel-between item-center ra-10">
                    <view class="panel-start item-center">
                        <image src="https://xunhang.oss-cn-beijing.aliyuncs.com/static/icons/index-icon/xy.png" class="icon-35"></image>
                        <view class="fo-28 fo-w ma-l20 sy">南昌航空大学</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 发布和寻找 -->
        <view class="function">
            <view class="release">
                <!-- 发布 -->
                <view class="list">
                    <view class="img" @tap="navigator">
                        <image src="../../static/images/index/release.png"></image>
                    </view>
                    <navigator url="../publish/publish?category=0" hover-class="none">
                        <view class="button" @tap="to_publish" :data-category="true">+发布</view>
                    </navigator>
                </view>
                <view class="font">寻失主</view>
            </view>

            <view class="release">
                <!-- 寻找 -->
                <view class="list">
                    <view class="img" @tap="navigator">
                        <image src="../../static/images/index/search.png"></image>
                    </view>
                    <navigator url="../publish/publish?category=1" hover-class="none">
                        <view class="button" @tap="to_publish" :data-category="false">+发布</view>
                    </navigator>
                </view>
                <view class="font">寻失物</view>
            </view>
        </view>

        <!-- 公告 -->
        <view class="announcement-title">
            <view class="img">
                <image src="../../static/images/index/announcement.png"></image>
            </view>
            <view class="font">最新公告</view>
        </view>

        <!-- 公告内容 -->
        <view class="announcement-center">
            <view :data-index="index" v-for="(item, index) in content" :key="index">
                <view class="list">
                    <view class="li"></view>
                    <view class="font">{{ item }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
// pages/index/index.js
// const app = getApp();
import UNI_APP from '@/.env.js'
const baseUrl = UNI_APP.BASE_URL
export default {
    data() {
        return {
            movies: ['https://xunhang.oss-cn-beijing.aliyuncs.com/static/beautiful1.jpg', 'https://xunhang.oss-cn-beijing.aliyuncs.com/static/beautiful2.jpg'],
            content: []
        };
    },
    onLoad(options) {
		this.getContent()
        console.log(options);
        if (options.openid != null) {
            wxLoginByOpenId(options.openid).then((res) => {
                console.log('体验用户登录成功');
                uni.setStorageSync('openid', res.data.openid);
                uni.setStorageSync('token', res.data.token);
                delete res.data.token;
                uni.setStorageSync('user', res.data);
            });
        }
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
       
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        getContent(){
        	this.$http({
        		url:baseUrl + '/announcement',
        		method:'GET'
        	}).then(data =>{
        		this.content = data
        	})
        },
        to_publish(e) {
            console.log(e);
            uni.navigateTo({
                url: '../publish/publish?category=' + e.target.dataset.category
            });
        },
    }
};
</script>
<style>
/* 首行黄色背景+正式上线 */
.headBg {
    background-color: #ffd23c;
    /* background-color:#738381; */
    height: 400rpx;
    border-bottom-right-radius: 80rpx;
    border-bottom-left-radius: 80rpx;
}

.headBg .content {
    background-color: #fff;
    width: 90%;
    height: 250rpx;
    margin: 50rpx auto;
    border-radius: 60rpx;
}

/* 轮播图Go */
.title {
    margin-top: -10rpx;
    width: 100%;
    height: 300rpx;
}

.title .swip {
    box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.3);
    margin: 0 auto;
    height: 280rpx;
    width: 650rpx;
    margin-top: 10rpx;
    border-radius: 20rpx;
    overflow: hidden;
}

.title .swip image {
    width: 100%;
}
/* 轮播图Over */
.search {
    display: flex;
    width: 90%;
    background-color: #fff;
    height: 80rpx;
    margin: 0 auto;
    margin-top: -40rpx;
    border-radius: 60rpx;
}
.search .img {
    margin-top: 17rpx;
    margin-left: 27rpx;
}
.search .img image {
    width: 50rpx;
    height: 50rpx;
}
.search .input {
    margin-top: 20rpx;
    margin-left: 27rpx;
    color: #b6b6b6;
    font-size: 30rpx;
}

/* 长方体渐变 */

.bg-m {
    /* background: linear-gradient(to right top,	#FFD700,	#F0E68C); */
    background: linear-gradient(to right top, #e1ccb1, #d89c7a);
    /* background-color:#81D8CF; */
}
.pa-30 {
    padding: 30rpx;
}
.panel-between {
    display: flex;
    justify-content: space-between;
}
.item-center {
    align-items: center;
}
.ra-10 {
    border-radius: 10rpx;
}
.panel-start {
    display: flex;
    justify-content: flex-start;
}
.icon-30 {
    width: 30rpx;
    height: 30rpx;
}
.icon-35 {
    width: 35rpx;
    height: 35rpx;
}
.fo-28 {
    font-size: 28rpx;
}
.fo-w {
    color: #fff;
    /* color:#81D8CF */
}
.ma-l20 {
    margin-left: 20rpx;
}
.pa-l60 {
    padding-left: 60rpx;
}
.pa-r60 {
    padding-right: 60rpx;
}
.pa-b20 {
    padding-bottom: 20rpx;
}

/* 发布和寻找 */
.function {
    margin-top: 80rpx;
    display: flex;
    justify-content: space-evenly;
}

.function .release {
    /* 新增暗影 */
    border-radius: 59px;
    background: linear-gradient(315deg, #ffffff, #e6e6e6);
    box-shadow: -5px -5px 14px #cccccc, 5px 5px 14px #ffffff;

    width: 300rpx;
    height: 260rpx;
    background-color: #fff;
    border-radius: 30rpx;
}
.function .img image {
    width: 80rpx;
    height: 80rpx;
    margin: 30rpx;
}
.function .font {
    margin-left: 30rpx;
    margin-top: 20rpx;
}
.function .list {
    display: flex;
}
.function .list .button {
    background-color: #ffd23c;
    /* background-color: #81D8CF; */
    width: 140rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    border-radius: 30rpx;
    margin-top: 25rpx;
}

/* 公告 */
.announcement-title {
    display: flex;
}
.announcement-title .font {
    margin-top: 66rpx;
    margin-left: 20rpx;
    font-size: 35rpx;
    font-weight: bold;
}
.announcement-title .img {
    margin-left: 70rpx;
    margin-top: 50rpx;
}
.announcement-title .img image {
    width: 80rpx;
    height: 80rpx;
}

.announcement-center {
    border-radius: 59px;
    background: linear-gradient(315deg, #ffffff, #e6e6e6);
    box-shadow: -5px -5px 14px #cccccc, 5px 5px 14px #ffffff;

    margin: 0 auto;
    width: 80%;
    background-color: #fff;
    padding: 20rpx;
    border-radius: 50rpx;
}
.announcement-center .list {
    display: flex;
    align-items: center;
    margin: 30rpx;
}
.announcement-center .list .li {
    background-color: #ffd23c;
    /* background-color: #81D8CF; */
    border-radius: 50%;
    width: 30rpx;
    height: 30rpx;
    margin-top: 10rpx;
}
.announcement-center .list .font {
    margin-top: 5rpx;
    margin-left: 25rpx;
    width: 480rpx;
}
</style>
